<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title>修改种类</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            //点击修改
            $("#button").click(function () {
                var newType = $("#addfrom form")[0];
                var formaDate = new FormData(newType);
                $.ajax({
                    url: "/applets/type/update",
                    type: "post",
                    data: formaDate,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        alert(data.msg);
                    }
                });
                return false;
            });

            //提交显示图片
            $("#icon").change(function () {
                var file = this.files[0];
                var preview = $("#preview").get(0);

                var reader = new FileReader();
                reader.onloadend = function () {
                    preview.src = reader.result;
                }
                if (file) {
                    reader.readAsDataURL(file);
                } else {
                    preview.src = "";
                }
            });

            //获得父类
            function getParent() {
                $.get("/applets/type/getParent", function (da) {
                    $.each(da.data, function (i, d) {
                        $("#parents").append("<label class='radio-inline'><input type='radio' th:field='*{t.parentid}' name='parentid' value='" + d.id + "'>" + d.typename + "</label>")
                    });
                });
            };
            getParent();
        });
    </script>
</head>
<body>
<div class="container" id="addfrom">
    <h2 class="text-center">商品种类修改</h2>

    <!--导航-->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="/ktype/ShowType.html">返回展示界面</a>
        </li>
    </ul>

    <form action="#" method="post">
        <div class="form-group">
            <label>ID</label>
            <input type="text" class="form-control" name="id" th:value="${t.id}" readonly>
        </div>
        <div class="form-group">
            <label>类型名称</label>
            <input type="text" class="form-control" name="typename" th:value="${t.typename}">
        </div>
        <div class="form-group">
            <label>排序</label>
            <input type="number" class="form-control" name="orderNum" th:value="${t.orderNum}">
        </div>
        <div id="parents" class="form-group">
            <label>父类</label>
        </div>
        <div class="form-group">
            <label>是否可用</label>
            <label class="radio-inline"><input type="radio" name="inuse" value="1" checked>是</label>
            <label class="radio-inline"><input type="radio" name="inuse" value="0" th:checked="${!t.inuse}">否</label>
        </div>
        <div class="form-group">
            <label>图标</label>
            <input type="file" class="form-control" name="iconcard" id="icon" accept=".jpg,.png,.jpeg">
            <img alt="图片预览" th:src="'/imgs/'+${t.icon}" height="200px" id="preview">
        </div>
        <div class="form-group">
            <input type="button" id="button" class="form-control" value="提交">
        </div>
    </form>
</div>
</body>
</html>